<template>
  <div>
    <el-form label-width="10em">
      <h-box header="创建一个新的品牌">
        <el-steps :active="_active" simple class="hui-mb-2">
          <el-step title="填写邀请码" icon="el-icon-edit"></el-step>
          <el-step title="授权小程序" icon="el-icon-upload"></el-step>
          <el-step title="创建完成" icon="el-icon-check"></el-step>
        </el-steps>

        <!-- 创建成功，start -->
        <template v-if="result.errcode === 0">
          <el-form-item label="品牌:"><b>{{ authorizerInfo.nickName }}</b></el-form-item>
          <el-form-item label="主体:"><b>{{ authorizerInfo.principalName }}</b></el-form-item>
          <el-form-item label="Logo:">
            <h-image mode="background-image" :src="authorizerInfo.headImg" size="80px" border-radius="4px" border></h-image>
          </el-form-item>

          <!-- 如果没认证，显示提示，start -->
          <el-form-item label="提示:" v-if="authorizerInfo.verifyTypeInfo === -1">
            <b class="hui-color-warning">因您授权的微信小程序账号未通过微信认证，您的品牌账号未创建完成。<br>在您完成微信认证后，账号将会创建完成。</b>
          </el-form-item>
          <!-- 如果没认证，显示提示，end -->

          <el-form-item slot="footer" class="hui-mb-0">
            <el-button @click="goHomeDashboard" :type="authorizerInfo.verifyTypeInfo === 0 ? 'primary' : 'warning'">进入品牌后台</el-button>
          </el-form-item>
        </template>
        <!-- 创建成功，end -->

        <!-- 重复授权，start -->
        <template v-else-if="result.errcode === 1">
          <el-alert
            type="error"
            title="授权重复，品牌创建失败"
            description="您的小程序已经在非码i应用中进行过授权，无法重复授权。如确定早先创建的非码i应用品牌已不再继续使用，请至“微信公众平台后台-登录小程序账号-设置-第三方服务-第三方平台授权管理”中，停止授权，然后再重新进行品牌创建。"
            :show-icon="false">
          </el-alert>

          <el-form-item slot="footer" class="hui-mb-0">
            <el-button @click="goAccountDashboard" type="danger">返回</el-button>
          </el-form-item>
        </template>
        <!-- 重复授权，end -->
      </h-box>
    </el-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      authorizerInfo: {
        nickName: '',
        headImg: '',
        serviceTypeInfo: 0,
        verifyTypeInfo: 0,
        userName: '',
        signature: '',
        principalName: ''
      },
      result: {
        errcode: 0,
        errmsg: ''
      }
    }
  },
  computed: {
    _active () {
      // 根据result状态，返回不同的进度active值
      const errcode = this.result.errcode
      let v
      if (errcode === 0) {
        v = 3
      } else {
        v = 2
      }
      return v
    }
  },
  methods: {
    // 重复，返回品牌列表
    goAccountDashboard () {
      this.$router.replace({
        path: 'dashboard'
      })
    },
    // 跳转homeDashboard
    goHomeDashboard () {
      this.$router.push({
        path: '/home'
      })
    },
    // 成功提示
    createSuccess () {
      this.$message.success('品牌创建成功！')
    },
    // 未认证提示
    verifyFail () {
      this.$message.warning('您的小程序账号未通过微信认证！')
    },
    // 模拟数据
    mockAuthorizerInfo () {
      const authorizerInfo = {
        nickName: '微信接口返回的小程序昵称',
        headImg: this.$random.randomEnum(this.$store.state.image),
        serviceTypeInfo: 0,
        verifyTypeInfo: 0,
        userName: '微信接口返回的小程序的原始ID',
        signature: '微信接口返回的帐号介绍',
        principalName: '微信接口返回的公司名称'
      }
      this.authorizerInfo = authorizerInfo
      if (authorizerInfo.verifyTypeInfo === 0) {
        this.createSuccess()
      } else {
        this.verifyFail()
      }
    },
    // 模拟商户创建回调
    mockResult () {
      this.result = {
        errcode: 0,
        errmsg: 'ok'
      }
    },
    mockLoad () {
      this.mockAuthorizerInfo()
      this.mockResult()
    }
  },
  created () {
    this.mockLoad()
  },
  mounted () {}
}
</script>

<style lang="less">
</style>
